<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eleShow-Test</title>
    <style>
        body {
            margin: 0px;
            background-color: aquamarine;
        }

        .drag {
            position: absolute;
            top: 50px;
            left: 300px;
            width: 200px;
            height: 200px;
            font-size: 20px;
            color: #fff;
            text-align: center;
            background-color: rgb(54, 54, 54);
            cursor: move;
        }

        .btn_closeDrag {
            position: relative;
            top: 65px;
            left: 200px;
            width: 100px;
            height: 50px;
        }

        .btn_recoverDrag {
            position: relative;
            top: 65px;
            left: 200px;
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="drag">按下拖动元素</div>
    <button class="btn_closeDrag">关闭按下拖动事件</button><br>
    <button class="btn_recoverDrag">恢复按下拖动事件</button>

    <script type="text/javascript" src="../src/tatu.js"></script>
    <script>
        const drag = document.querySelector('.drag');
        const btnCloseDrag = document.querySelector('.btn_closeDrag');
        const btnRecoverDrag = document.querySelector('.btn_recoverDrag');
        drag.addEventListener('selectstart', (e) => {
            e.preventDefault();
        });

        /*  eleDrag(): 按下拖动动画---参数说明:
            参数一: htmlElement: 需要操作的html元素
            参数二: direction: 拖动的方向，参数的值为"x" / "y" / "xy"
            参数三: callback: 可选，动画完成后的回调函数
            ------
            按下拖动动画---返回值说明:
            返回一个对象，其包含closeDrag方法， 该方法可以关掉对该元素的拖动监听事件
            object.closeDrag()
            和包含recoverDrag方法 该方法可以恢复对该元素的拖动监听事件
            object.recoverDrag()
        */

        const obj = eleDrag(drag, 'xy', () => {
            console.log('ok');
        });
        btnCloseDrag.addEventListener('click', () => {
            obj.closeDrag();
            drag.style.cursor = 'default';
        });
        btnRecoverDrag.addEventListener('click', () => {
            obj.recoverDrag();
            drag.style.cursor = 'move';
        });
    </script>
</body>

</html>